<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta content="telephone=no" name="format-detection" />
  <title>2018临考押题卷</title>
  <meta itemprop="name" content="谁说人算不如天算？快来和我一起预测押题疯狂提分！" />
  <meta itemprop="image" content="/img/ygshare.jpg" />
  <meta name="description" itemprop="description" content="《高考命题预测与题——2018临考押题卷》首发预售，火热上线！" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/tg/success.css">
  <% include ../component/_common_tongji.html %>
    <style>
      [v-cloak] {
        display: none;
      }

      #show {
        display: none;
      }
    </style>
    <script>

      window.onload = function () {
        var compa = document.querySelector('#show');
        if (compa) {
          compa.style.display = 'block';
        }
      }
      // 没有token回首页重新登录
      var token = window.localStorage.getItem('token');
      if (!token) {
        if (location.search != "") {
          location.replace('/tg' + location.search + "&o=share");
        } else {
          location.replace('/tg?o=share');
        }
      }
      var scale = 1 / devicePixelRatio;
      document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
      document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
    </script>
</head>

<body>
  <div id="app" style="height:100%">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div class="content" v-cloak>
      <div class="top">
        <div class="topLeft"></div>
        <div class="topRight"></div>
        <img src="/img/ygsuccess01.jpg" alt="" class="topImg">
        <p class="success">
          <img src="/img/tg04.png" alt="">恭喜您订购成功</p>
        <p class="invite">已成功邀请{{lastNum}}人参团</p>
        <div v-for="(items,index) in person">
          <div class="topFooter" v-for="(item,index) in items.member_info">
            <div class="topFooterLeft">
              <img :src="item.avatar_url" alt="">
              <span>{{item.nickname}}</span>
            </div>
            <div class="topFooterRight">
              <span>{{item.create_time | formatDate}}</span>
              <span>{{index==0?"团长":"团员"}}</span>
            </div>

          </div>
          <div class="line"></div>
        </div>
      </div>
      <div class="center">
        <div class="topLeft"></div>
        <div class="topRight"></div>
        <img src="/img/ygsuccess04.jpg" alt="" class="centerImg1">
        <img src="/img/ygsuccess05.jpg" alt="" class="centerImg2">
        <a href="https://jq.qq.com/?_wv=1027&k=596KUdq" class="getLink">快速进群</a>
        <p>群内定期上传海量备考复习资料，数学解题图卡、英语语法合集等一应俱全。定期发放天利38套官方活动超值福利。</p>
      </div>
      <div class="bom">
        <div class="topLeft"></div>
        <div class="topRight"></div>
        <img src="/img/ygsuccess03.jpg" alt="">
        <ul>
          <li> 1. 成功缴费预购后，可生成自己的专属报名海报；</li>
          <li>2. 通过专属海报邀请好友扫码预购，每成功邀请一名好友预购，即可领取20元助学金；</li>
          <li>3. 邀请多个好友预购成功，可叠加获得更多助学金；</li>
          <li> 4. 助学金可在预售期结束后进群兑换提现。</li>
        </ul>
      </div>
      <footer>
        <div class="footer_tg" v-if='footer_tg'>
          <a href="javascript:;" class="btn left" @click="handleCheck">订单查询</a>
          <a href="javascript:;" class="btn right" @click="handleTgAgain">免费继续开团得助学金</a>
        </div>
        <div class="foorer_share" v-if="footer_share">
          <a href="javascript:;" class="btn left" @click="handleCheck">订单查询</a>
          <a href="javascript:;" class="btn right" @click="handleShare">邀请好友参团</a>
        </div>
      </footer>
      <div class="share" v-if="shareImg" @click="handleUnshare">
        <img src="/img/share.png" alt="">
      </div>
    </div>
    <div class="open" @click="handleTgAgainFalse" style="display:none;">
      <div class="openMode" v-if="tgAgain">
        <p>好友组团得助学金</p>
        <span>
          每次要求2位好友组团，218元/人
          <br>组团成功，你将获得40元助学金奖励
        </span>
        <a href="javascript:;" @click='handleGroups'>我要开团</a>
      </div>
    </div>
  </div>
  <script src="https://sfile.tl100.com/xgkj_tlw_web_wx/js/libs/vue.min.js"></script>
  <script src="https://sfile.tl100.com/xgkj_tlw_web_wx/js/libs/moment.min.js"></script>
  <script src="https://sfile.tl100.com/xgkj_tlw_web_wx/js/libs/axios.min.js"></script>
  <script src="/js/api.js"></script>
  <script src="/js/wx.js"></script>
  <script src="/js/getuserinfo.js"></script>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        invitation_code: '',
        person: [],
        lastNum: '',
        obj_length: '',
        tgAgain: false,
        footer_tg: true,
        footer_share: false,
        shareImg: false
      },
      mounted: function () {
        this.getUserInfo();
        this.getBuy();
        <% if (invitation_code != '') {%>
          this.invitation_code = "<%= invitation_code %>";
        <%}%>

        wxObj({
          shareUrl: "https://m.tl100.com/tg?invitation_code=<%=invitation_code%>",
          title: '谁说人算不如天算？快来和我一起预测押题疯狂提分！',
          desc: '《高考命题预测与题——2018临考押题卷》首发预售，火热上线！',
          link: '&',
          imgUrl: 'img/ygshare.jpg'
        });
      },
      filters: {
        formatDate(v) {
          return moment(v).format('YYYY-MM-DD HH:mm')
        }
      },
      methods: {
        getUserInfo() {
          var vm = this;
          var token = localStorage.getItem('token');
          getUserInfo(this,token,'/api/pre_buy_book/getFinishGroupPurchaseInfo',function (res_data) {
            var res = res_data;
            vm.person = res.data.msg.groups_info;
            for (var i = 0; i < vm.person.length; i++) {
              if(vm.person[i].state <= 0) {
                vm.footer_share = true;
                vm.footer_tg = false;
              }
              // 如果数组只有一个元素就添加一个元素，添加的元素是显示空白的头像
              if (vm.person[i].member_info.length < 2) {
                vm.person[i].member_info.push({
                  avatar_url: '/img/tg05.png',
                  nickname: '未邀请团员'
                })
              }
              // 如果数组只有两个元素就再添加一个元素
              if (vm.person[i].member_info.length < 3) {
                vm.person[i].member_info.push({
                  avatar_url: '/img/tg05.png',
                  nickname: '未邀请团员'
                })
              }
            }
          })
        },
        getBuy() {
          api.post('/api/data_lobo/getPreBuyEnterGroupAddress')
            .then(function (res) {
              if (res.data.res_code == 1) {
                document.querySelector('.getLink').href = res.data.msg
              }
            }).catch(function (error) {
              setLog('/api/data_lobo/getPreBuyEnterGroupAddress:catch', JSON.stringify(error));
            });
        },
        handleCheck() {
          location.href = '/tg/check';
        },
        handleTgAgain() {
          // 继续开团的弹框
          document.querySelector('.open').style.display = 'block';
          this.tgAgain = true;
        },
        handleTgAgainFalse() {
          document.querySelector('.open').style.display = 'none';
          this.tgAgain = false;
        },
        handleGroups() {     
          // 确认开团
          api.post('/api/pre_buy_book/createNoLimitGroup', {
            token: localStorage.getItem('token')
          }).then(function (res) {
            alert('开团成功，分享好友加入');
          }).catch(function (error) {
            setLog('/api/pre_buy_book/createNoLimitGroup:catch', JSON.stringify(error));
          });
          // 确定开团后免费开团按钮隐藏，显示分享好友按钮
          this.footer_tg = false;
          this.footer_share = true;
        },
        handleShare() {
          this.shareImg = true;
        },
        handleUnshare() {
          this.shareImg = false;
        }
      }
    })


  </script>
</body>

</html>